<template>
  <!-- 部门管理 -->
  <div class="page-padding-bg">
    <!-- <el-tree style="min-width: 600px" :data="treeData" :props="{  children: 'children', label: 'title'}" @node-click="handleNodeClick" /> -->
    <div class="top-btn"> <lay-button class="btn-add" type="primary" size="sm" @click="add" v-permissions="'sysorg_add'">新增</lay-button></div>
    <el-table :data="treeData" style="width: 100%; margin-bottom: 20px" row-key="key" border>
      <el-table-column prop="title" label="部门名称" />
      <!-- <el-table-column prop="key" label="key(id)" /> -->
      <el-table-column prop="" label="操作">
        <template #default="scope">

          <div v-if="scope.row.value!=-1">
            <lay-button class="btn-edit" type="primary" size="xs" @click="edit(scope.row)" v-permissions="'sysorg_edit'">修改</lay-button>
            <lay-button class="btn-delete" type="danger" size="xs" @click="del_table(scope.row)" v-permissions="'sysorg_delete'">删除</lay-button>

          </div>
        </template> 
      </el-table-column>
    </el-table>

    <!-- 弹层 -->
    <lay-layer v-model="is_visible" :area="['500px', '300px']" :title="visibleTitle" :btn="visible_opteron" :shadeClose="false">
      <div style="padding: 20px 40px 20px 20px;">
        <lay-form :model="form" ref="layFormRef11" required>
          <lay-form-item label="部门名称" prop="orgName">
            <lay-input v-model="form.orgName" size="sm" placeholder="请输入"></lay-input>
          </lay-form-item>
          <lay-form-item label="上级部门" prop="orgSuperid">
            <!-- <lay-input v-model="form.orgSuperid" size="sm"></lay-input> -->
            <lay-select v-model="form.orgSuperid" placeholder="请选择" style="width: 100%;" size="sm">
              <lay-select-option :value="item.orgId" :label="item.orgName" v-for="item in orgList" :key="item.orgId"></lay-select-option>
            </lay-select>
          </lay-form-item>

          <!-- <lay-form-item label="等级" prop="orgLevel">
            <lay-input v-model="form.orgLevel" size="sm"></lay-input>
          </lay-form-item> -->

          <!-- <lay-form-item label="状态" prop="orgStatus">
            <lay-select v-model="form.orgStatus" placeholder="请选择" style="width: 100%;" size="sm" :disabled="!cannotEdit">
              <lay-select-option value="0" label="开启"></lay-select-option>
              <lay-select-option value="1" label="关闭"></lay-select-option>
            </lay-select>
          </lay-form-item> -->

        </lay-form>
      </div>
    </lay-layer>

  </div>
</template>

<script setup lang="ts">
import http from "@/http/index";
import { onMounted, ref } from "vue";
import { layer } from "@layui/layui-vue";

import { useCounterStore } from "@/current";
import { storeToRefs } from "pinia"; // cnpm i pinia --save  2.1.3
const store = useCounterStore();
const { nowMenuBtnArr } = storeToRefs(store); //  数据

onMounted(() => {
  get_list_tree();
});

const layFormRef11 = ref();
const form = ref({
  orgLevel: "",
  orgName: "",
  orgStatus: "",
  orgSuperid: "",
});

// 控制弹层
const is_visible = ref(false);
// 弹层title
const visibleTitle = ref("");

// 部门下面是否有成员
let cannotEdit = ref(true);

// 弹层操作
const visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      //   layer.confirm("确认操作", { shade: false,icon:1 });
      layFormRef11.value.validate(async (status, model, errors) => {
        console.log(status, model, errors);
        if (status) {
          let data = {};
          let url = "";
          let method = "";
          if (visibleTitle.value == "新增") {
            data = form.value;
            url = "/secOrg";
            method = "post";
          } else if (visibleTitle.value == "修改") {
            data = form.value;
            url = "/secOrg";
            method = "put";
          }

          const res = await http.corsApi(url, method, data);
          console.log(res);
          if (res.data) {
            layer.confirm(method == "post" ? "添加成功" : "修改成功", { icon: 1 });
            await get_list_tree();
            await get_org_list();
            is_visible.value = false;
          }
        }
      });
    },
  },
  {
    text: "取消",
    callback: () => {
      is_visible.value = false;
    },
  },
]);

// 新增
const add = () => {
  cannotEdit.value = true;
  is_visible.value = true;
  visibleTitle.value = "新增";
  form.value.orgLevel = "";
  form.value.orgName = "";
  form.value.orgStatus = "";
  form.value.orgSuperid = "";
};
// 修改
const edit = async (row) => {
  console.log(row);

  cannotEdit.value = true;
  const result: any = await http.get(`/secOrg/judge/${row.key}`, {});

  if (result.code != 200 || !result.data) {
    cannotEdit.value = false;
  }

  is_visible.value = true;
  visibleTitle.value = "修改";
  await get_tree_detail(row.key);
};

// 删除
const del_table = async (row) => {
  const result: any = await http.get(`/secOrg/judge/${row.key}`, {});
  if (result.code != 200 || !result.data) {
    layer.confirm(`该部门下有成员，不可删除`, { icon: 2 });
    return;
  }

  layer.confirm("确认要删除吗？", {
    btn: [
      {
        text: "确认",
        callback: async (id) => {
          const res = await http.corsApi(`/secOrg/${row.key}`, "delete", {});
          console.log(res);
          if (res.data) {
            await get_list_tree();

            await layer.confirm("删除成功", { icon: 1 });
          }
          layer.close(id);
        },
      },
      {
        text: "取消",
        callback: (id) => {
          layer.close(id);
        },
      },
    ],
  });
};

const treeData = ref([]);
const handleNodeClick = (data) => {
  console.log(data);
};

const get_list_tree = async () => {
  const res = await http.corsApi("/secOrg/getOrgAllTreeData", "get", {});
  console.log(res);
  treeData.value = res.data;
};
const get_tree_detail = async (id) => {
  const res = await http.corsApi(`/secOrg/${id}`, "get", {});
  console.log(res);
  if (res.data) {
    form.value = res.data;
  } else {
    is_visible.value = false;
  }
};

const orgList = ref([]);
const get_org_list = async () => {
  const res = await http.corsApi("/secOrg", "get", {});
  console.log(res);
  orgList.value = [
    {
      orgName: "评吸系统组织架构",
      orgId: "-1",
    },
    ...res.data,
  ];

  console.log(orgList.value);
};

get_org_list();
</script>

<style scoped lang="scss">
.top-btn {
  margin-bottom: 15px;
}
</style>